<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>AI MiFi 主界面</title>
  <meta name="viewport" content="width=240, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
  <style>
    body {
      width: 240px;
      height: 320px;
      border-radius: 32px;
      overflow: hidden;
      background: linear-gradient(135deg, #232e47 0%, #2e3d5c 100%);
      margin: 0;
      font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
    }
    .pixel {
      image-rendering: pixelated;
    }
  </style>
</head>
<body class="relative w-[240px] h-[320px]">
  <!-- 顶部状态栏 -->
  <div style="display:flex;align-items:center;justify-content:space-between;height:40px;background:linear-gradient(to right,#1e3a8a,#60a5fa);color:#fff;font-size:12px;padding:0 12px;">
    <div style="display:flex;align-items:center;gap:4px;">
      <img src="https://img.icons8.com/ios-filled/50/ffffff/wifi.png" alt="WiFi" style="width:16px;height:16px;vertical-align:middle;" />
      <img src="../icon/signal.png" alt="Signal" style="width:16px;height:16px;vertical-align:middle;" />
      <span style="margin-left:4px;">4G</span>
    </div>
    <div style="display:flex;align-items:center;gap:4px;">
      <img src="https://img.icons8.com/ios-filled/50/ffffff/battery--v1.png" alt="Battery" style="width:16px;height:16px;vertical-align:middle;" />
      <span>87%</span>
    </div>
    <div style="font-size:12px;">12:34</div>
  </div>

  <!-- 主显示区 -->
  <div style="display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(to bottom,#1e40af,#60a5fa);height:220px;width:100%;position:relative;">
    <!-- 可切换背景图/AI 状态图标 -->
    <img src="https://images.unsplash.com/photo-1465101046530-73398c7f28ca?auto=format&fit=crop&w=240&q=80" alt="bg" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0.4;" />
    <div style="position:relative;z-index:10;display:flex;flex-direction:column;align-items:center;">
      <div style="background:rgba(255,255,255,0.3);border-radius:50%;padding:8px;margin-bottom:8px;box-shadow:0 2px 8px rgba(0,0,0,0.15);">
        <img src="https://q1.qlogo.cn/g?b=qq&nk=10001&s=640" alt="AI Girl" style="width:56px;height:56px;border-radius:50%;object-fit:cover;" />
      </div>
      <div style="color:#fff;text-align:center;font-size:16px;font-weight:600;text-shadow:0 1px 2px #000;">我是来自台湾机车妹....</div>
    </div>
  </div>

  <!-- 底部状态栏 -->
  <div style="display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;background:linear-gradient(to right,#1f2937,#4b5563);color:#fff;font-size:12px;height:60px;">
    <div style="display:flex;width:100%;justify-content:space-between;padding:0 16px;">
      <!-- 左侧：HP/MP -->
      <div style="display:flex;flex-direction:column;align-items:flex-start;">
        <div style="display:flex;align-items:center;gap:4px;margin-bottom:4px;">
          <img src="https://img.icons8.com/ios-filled/50/fa314a/like.png" alt="HP" style="width:16px;height:16px;vertical-align:middle;" />
          <div style="width:40px;height:8px;background:#ef4444;border-radius:8px;margin:0 4px;"></div>
          <span style="font-size:11px;min-width:38px;text-align:right;font-family:monospace;">92/100</span>
        </div>
        <div style="display:flex;align-items:center;gap:4px;">
          <img src="../icon/flash.png" alt="MP" style="width:16px;height:16px;vertical-align:middle;" />
          <div style="width:40px;height:8px;background:#3b82f6;border-radius:8px;margin:0 4px;"></div>
          <span style="font-size:11px;min-width:38px;text-align:right;font-family:monospace;">45/60</span>
        </div>
      </div>
      <!-- 右侧：Lv./Coin -->
      <div style="display:flex;flex-direction:column;align-items:flex-end;min-width:70px;">
        <div style="display:flex;align-items:center;justify-content:flex-end;gap:4px;margin-bottom:4px;">
          <span style="font-size:11px;min-width:32px;text-align:right;font-family:monospace;">12</span>
          <img src="https://img.icons8.com/ios-filled/50/facc15/star--v1.png" alt="Lv" style="width:16px;height:16px;vertical-align:middle;" />
        </div>
        <div style="display:flex;align-items:center;justify-content:flex-end;gap:4px;">
          <span style="font-size:11px;min-width:32px;text-align:right;font-family:monospace;">99</span>
          <img src="https://img.icons8.com/ios-filled/50/facc15/bitcoin.png" alt="Coin" style="width:16px;height:16px;vertical-align:middle;" />
        </div>
      </div>
    </div>
  </div>
</body>
</html> 